<template>
    <div class="smartWarningAnalysis">
        <a-modal width="90%" :visible="visible" title="成品库存变化趋势" @cancel="modalCancel"
            class="yuan-modal smartWarningAnalysis-modal" :dialog-style="{ top: '20px' }">
            <a-spin tip="Loading..." :spinning="formLoading">
                <div class="yuan-container">
                    <StatusPanelVue status="danger" name="品种数量" val="50" />
                    <StatusPanelVue status="warning" name="品种数量" val="50" />
                    <StatusPanelVue status="success" name="品种数量" val="50" />
                    <div class="filter-panel">
                        <div class="filter-list">
                            <span>选择日期：</span>
                            <a-range-picker @change="dateChange" :placeholder="['开始日期','结束日期']"
                                :format="['YYYY-MM-DD','YYYY-MM-DD']" />
                        </div>
                        <div class="filter-list">
                            <span>选择品种：</span>
                            <a-select mode="multiple" v-model="pageParams.type" placeholder="请选择" @change="typeChange"
                                style="width:300px">
                                <a-select-option value="川芎">川芎</a-select-option>
                                <a-select-option value="党参">党参</a-select-option>
                                <a-select-option value="当归">当归</a-select-option>
                                <a-select-option value="白莲">白莲</a-select-option>
                            </a-select>
                        </div>
                    </div>
                    <div id="analysisChart"></div>
                </div>
            </a-spin>
            <template slot="footer">
                <a-button @click="modalCancel">
                    关闭
                </a-button>
            </template>
        </a-modal>
    </div>
</template>

<script lang="ts">
import { echartLoad } from "@/utils";
import { Vue, Component, Prop, Watch } from "vue-property-decorator";
import StatusPanelVue from "./statusPanel.vue";

@Component({ name: "TPL", components: { StatusPanelVue } })
export default class index extends Vue {
    @Prop({ default: "" }) visible!: boolean;
    @Watch("visible")
    visibleChange() {
        if (this.visible) {
            this.$nextTick(() => {
                this.setChart();
            });
        }
    }
    pageParams: any = { type: ["川芎"] };
    formLoading = false;

    closeModal() {
        this.$emit("closeModal");
    }
    modalCancel() {
        this.closeModal();
    }
    dateChange(e: any[]) {
        this.pageParams.date = e.map((item) => item.format("YYYY-MM-DD"));
    }
    typeChange(e: string[]) {
        if (e.length > 3) e.pop();
        this.setChart();
    }

    chart: any = null;
    getXOptions() {
        return {
            type: "category",
            axisLabel: {
                interval: 0,
            },
            name: "",
        };
    }
    getYOptions() {
        return {
            type: "value",
            axisLine: {
                show: true,
            },
            name: "单位(kg)",
        };
    }
    setChart() {
        if (this.chart) {
            this.resetChart();
        } else {
            this.initChart();
        }
    }
    resetChart() {
        const data = this.setData();
        const options = this.chart.getOption();
        options.series = this.getSeries(data.dataArr);
        options.xAxis = { ...this.getXOptions(), data: data.titleArr };
        options.yAxis = this.getYOptions();
        this.chart.setOption(options, true);
    }
    initChart() {
        echartLoad(() => {
            const data = this.setData();
            const chartDom = document.getElementById("analysisChart");
            // eslint-disable-next-line @typescript-eslint/no-this-alias
            const options: any = {
                grid: {
                    top: 80,
                    bottom: 40,
                    left: 80,
                    right: 70,
                },
                legend: {},
                tooltip: {
                    trigger: "item",
                    axisPointer: {
                        type: "shadow",
                        shadowStyle: {
                            color: "rgba(84,112,198,0.3)",
                        },
                    },
                    formatter: function (params: any) {
                        return (
                            `<span style="margin-right:8px;display:inline-block;width:10px;height:10px;border-radius:10px;background-color:${params.color}"></span>` +
                            `<span>${params.seriesName}</span>` +
                            `<div>${params.value}</div>` +
                            `<div>低于库存预警XXXXkg</div>`
                        );
                    },
                },
                xAxis: { ...this.getXOptions(), data: data.titleArr },
                yAxis: this.getYOptions(),
                series: this.getSeries(data.dataArr),
            };
            if (chartDom) {
                this.chart = window.echarts.init(chartDom as HTMLDivElement);
                this.chart.setOption(options);
            }
        });
    }
    colors = ["#F25C19", "#294482", "#57A349", "#FAC858", "#85C8E2"];
    getSeries(dataArr: { name: string; dataList: string[] }[]) {
        const returnArr: any[] = [];
        dataArr.forEach((item, i) => {
            returnArr.push({
                type: "line",
                smooth: true,
                symbolSize: 8,
                color: this.colors[i],
                label: {
                    show: true,
                    color: "inherit",
                    position: "top",
                },
                name: item.name,
                data: item.dataList,
                areaStyle: {
                    color: new window.echarts.graphic.LinearGradient(0, 0, 0, 1, [
                        {
                            offset: 0,
                            color: this.colors[i], // 渐变颜色，可以设置多个不同的颜色
                        },
                        {
                            offset: 1,
                            color: "rgba(255, 255, 255, 0.1)", // 渐变颜色
                        },
                    ]),
                },
            });
        });
        return returnArr;
    }

    testData: { [key: string]: { date: string; val: string }[] } = {
        川芎: [
            { date: "09/01", val: "25" },
            { date: "09/02", val: "29" },
            { date: "09/03", val: "50" },
            { date: "09/04", val: "68" },
            { date: "09/05", val: "90" },
            { date: "09/06", val: "105" },
            { date: "09/07", val: "100" },
            { date: "09/08", val: "255" },
        ],
        党参: [
            { date: "09/01", val: "250" },
            { date: "09/02", val: "290" },
            { date: "09/03", val: "500" },
            { date: "09/04", val: "680" },
            { date: "09/05", val: "90" },
            { date: "09/06", val: "105" },
            { date: "09/07", val: "50" },
            { date: "09/08", val: "155" },
        ],
        当归: [
            { date: "09/01", val: "5" },
            { date: "09/02", val: "29" },
            { date: "09/03", val: "50" },
            { date: "09/04", val: "8" },
            { date: "09/05", val: "9" },
            { date: "09/06", val: "105" },
            { date: "09/07", val: "100" },
            { date: "09/08", val: "25" },
        ],
        白莲: [
            { date: "09/01", val: "25" },
            { date: "09/02", val: "2910" },
            { date: "09/03", val: "50" },
            { date: "09/04", val: "68" },
            { date: "09/05", val: "910" },
            { date: "09/06", val: "105" },
            { date: "09/07", val: "1200" },
            { date: "09/08", val: "2505" },
        ],
    };
    setData() {
        const typeArr: string[] = this.pageParams.type;
        const dataArr = typeArr.map((item: string) => {
            return {
                name: item,
                titleArr: this.testData[item].map((o) => o.date),
                dataList: this.testData[item].map((o) => o.val),
            };
        });

        return { titleArr: dataArr[0] ? dataArr[0].titleArr : [], dataArr };
    }
}
</script>

<style lang="scss">
.smartWarningAnalysis-modal {
    #analysisChart {
        width: 1200px;
        height: 400px;
        margin-top: 20px;
        max-width: 100%;
    }
}
</style>
